<style scoped >
.privilege .footer{text-align: center}
.privilege  .footer .save{
    padding: 6px 22px;
    background: #37b3b3;
    border: 1px solid #37b3b3;
    color: #ffffff;
}
.privilege  .footer .save:hover{background: #019ea3;}
.privilege .footer .clear{
    padding: 6px 22px;
    background: #c7cdcd;
    border: 1px solid #c7cdcd;
    color: #ffffff;
}

.privilege .ivu-form .ivu-form-item .ivu-form-item-content .ivu-select{  width:90%;}
.privilege .ivu-form .ivu-form-item .ivu-form-item-content .ivu-input-wrapper{  width:90%;}
</style>
<template>
    <div class="console-product">
        <Row class="position">
            <i-col :xs="12" :sm="10" :md="8" :lg="6" >
                <div class="ivu-breadcrumb">
                    <span class="ivu-breadcrumb-item-link">当前位置：</span>
                    <span class="ivu-breadcrumb-item-link">用户中心</span>
                    <span class="ivu-breadcrumb-item-separator">/</span>
                    <span class="ivu-breadcrumb-item-link">权限管理</span>
                </div>
            </i-col>
            <i-col class="fr">
                 <span>
                  <Button @click="addPrivilegeMain"><i class="iconfont cofont">&#xe649;</i> 新增</Button>
                    <Modal class-name="popup" class="privilegebody" @on-cancel="cancelPrivilege('privilegeValidate')" v-model="privilegeModal" :mask-closable="false" width="360">
                        <p slot="header" style="color: #eeebeb;" v-drag>
                            <span v-if="addPrivilege">新增</span>
                            <span v-if="editPrivilege">编辑</span>
                        </p>
                        <div class="privilege">
                            <Form ref="privilegeValidate" :rules="rulePrivilege" :model="privilegeValidate" label-position="left" :label-width="70">
                                <input type="hidden" name="type" v-model="privilegeValidate.type">
                                <Form-item label="一级菜单:" prop="levelMenu" v-if="addPrivilege">
                                    <Select v-model="privilegeValidate.levelMenu" clearable @on-change="selectLevelMenu">
                                        <Option v-for="option in parentIdList" :label="option.name" :value="option.id" :key="option.id">
                                            <span>{{option.name}}</span>
                                        </Option>
                                    </Select>
                                </Form-item>
                                 <Form-item label="二级菜单:" prop="parentId" v-if="addPrivilege" v-show="secondShow">
                                     <Select v-model="privilegeValidate.parentId" clearable>
                                        <Option v-for="option in secondLevelMenuList" :label="option.name" :value="option.id" :key="option.id">
                                            <span>{{option.name}}</span>
                                        </Option>
                                    </Select>
                                </Form-item>
                                <Form-item label="一级菜单:" v-if="editPrivilege">
                                    <span>{{privilegeValidate.levelMenu}}</span>
                                </Form-item>
                                 <Form-item label="二级菜单:" v-if="editPrivilege">
                                     <span>{{privilegeValidate.secondLevelMenu}}</span>
                                </Form-item>
                                <Form-item label="权限名称:" prop="name">
                                    <Input v-model="privilegeValidate.name"></Input>
                                </Form-item>
                                <Form-item label="权限code:" prop="code">
                                    <Input v-model="privilegeValidate.code"></Input>
                                </Form-item>
                            </Form>
                            <div class="footer">
                                <Button class="save" v-if="addPrivilege" :loading="modal_loading" @click="savePrivilege('privilegeValidate')">保存</Button>
                                <Button class="clear" v-if="addPrivilege" @click="cancelPrivilege('privilegeValidate')">取消</Button>
                                <Button class="save" v-if="editPrivilege" :loading="modal_loading" @click="editSavePrivilege('privilegeValidate')">保存</Button>
                            </div>
                        </div>
                        <div slot="footer"></div>
                    </Modal>
                </span>
            </i-col>
        </Row>
        <div class="console-product-contcent" id="contcentHeight" :style="{height:height +'px'}">
            <Form class="searchform" ref="privilegeForm" :model="privilegeForm" inline>
                <input type="hidden" name="type" v-model="privilegeForm.type">
                <Form-item label="一级菜单:" :label-width="65" prop="levelMenu" style="width:200px;">
                    <Select v-model="privilegeForm.levelMenu" clearable @on-change="selectLevelMenus">
                        <Option v-for="option in parentIdList" :label="option.name" :value="option.id" :key="option.id">
                            <span>{{option.name}}</span>
                        </Option>
                    </Select>
                </Form-item>
                <Form-item label="二级菜单:" :label-width="65" prop="levelMenu" style="width:200px;">
                    <Select v-model="privilegeForm.parentId" clearable>
                        <Option v-for="option in secondLevelMenuList" :label="option.name" :value="option.id" :key="option.id">
                            <span>{{option.name}}</span>
                        </Option>
                    </Select>
                </Form-item>
                <Form-item label="权限名称:" prop="name" :label-width="65" style="width: 190px">
                    <Input v-model="privilegeForm.name" @on-enter="privilegeSearch"></Input>
                </Form-item>
                <Form-item>
                    <Button class="search" @click="privilegeSearch">搜索</Button>
                </Form-item>
            </Form>
            <Modal v-model="delModal" class-name="delect" width="250" @on-cancel="delCancel" :mask-closable="false">
                <p slot="header" style="color: #eeebeb" v-drag>
                    <span>提示框</span>
                </p>
                <p class="delbody">
                    <i class="iconfont" style="color: #f76165;font-size: 16px;">&#xe615</i>&nbsp;&nbsp;确认删除？
                        </p>
                <div slot="footer">
                    <div class="footer">
                        <Button  class="save" :loading="delLoading" @click="delOK">确认</Button>
                        <Button class="clear" @click="delCancel">取消</Button>
                    </div>
                </div>
            </Modal>
            <Loading v-if="spinShow"></Loading>
            <Table v-if="tableShow"  stripe border :columns="privilegeColumns" ref="privilegeData" :data="privilegeData"></Table>
        </div>
        <Row style="background-color: #ffffff;margin-top: 1px;">
            <Col>
            <div v-if="tableShow" class="tablepage clearfix">
                <div class="fl">
                    <span>共</span>
                    <span class="num">{{total}}</span>
                    <span>条记录</span>
                    <span>{{currentPage}}/{{pageTotal}}页</span>
                </div>
                <div class="fr">
                    <Page :total="total" :page-size="pageSize" :current="currentPage" placement="top" show-elevator show-sizer @on-change="changePage" @on-page-size-change="changeSize"></Page>
                </div>
            </div>
            </Col>
        </Row>
    </div>
</template>
<script>
    // 导入要用到的子组件
    import Loading from '../../components/loading'
    export default {
        data () {
            const validatecode = (rule, value, callback) => {
                var re = /^[0-9A-Za-z\_\-\.\/~！@#￥%……&*（）+=~!$^();'":,<>《》“”‘’：；？、?[|]*$/;
                if (re.test(value)) {
                    callback();
                } else {
                    callback(new Error('不能输入中文'));
                }
            };
            return {
                modal_loading: false,
                total: 0,//总条数
                currentPage: 1,//当前页
                pageTotal: 1,//总页数
                pageSize: 10,//默认每页显示数量
                height: 1000,//表单高度
                privilege:'',
                spinShow: true,//加载层，默认显示
                delModal: false,//删除弹窗
                delLoading:false,//删除
                delId:'',//删除id
                tableShow: false,//表格层，默认隐藏
                privilegeForm: {//权限管理条件查询
                    type: '1',
                    name:'',
                    privilege:'all',
                },
                secondShow:true,
                privilegeData:[],//数据
                privilegeColumns:[
                    {
                        width:'4%',
                        title: '序号',
                        type:'index'
                    },
                    {
                        width:'16%',
                        title: '所属菜单',
                        key: 'menuDisplay',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.menuDisplay,
                                    placement:"bottom-start"
                                }
                            }, [h('span', params.row.menuDisplay)]);
                        }
                    },
                    {
                        width:'16%',
                        title: '权限名称',
                        key: 'name',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.name,
                                    placement:"bottom-start"
                                }
                            }, [h('span', params.row.name)]);
                        }
                    },
                    {
                        width:'16%',
                        title: '权限code',
                        key: 'code',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.code,
                                    placement:"bottom-start"
                                }
                            }, [h('span', params.row.code)]);
                        }
                    },
                    {
                        width:'16%',
                        title: '创建人',
                        key: 'createBy',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.createBy,
                                    placement:"bottom-start"
                                }
                            }, [h('span', params.row.createBy)]);
                        }
                    },
                    {
                        width:'16%',
                        title: '更新时间',
                        key: 'creatTime',
                        render: (h, params) => {
                            const text = params.row.creatTime != null ? new Date(params.row.creatTime).format('yyyy-MM-dd hh:mm:ss') : "";
                            return h('Tooltip', {
                                props: {
                                    content: text,
                                    placement:"bottom-start"
                                }
                            }, [h('span', text)]);
                        }
                    },
                    {
                        width:'16%',
                        title: '操作',
                        key: 'id',
                        render: (h, params) => {
                            return h('div', [
                                h('Button',
                                    {
                                        class:"blue",
                                        on: {
                                            click: () => {
                                                this.editPrivilegeMain(params.row.id)
                                            }
                                        }
                                    },
                                    [
                                        h('i', {
                                            class : 'iconfont icon-bianji'
                                        }),
                                        h("span",'编辑')
                                    ]),
                                h('Button',
                                    {
                                        class:"red",
                                        on: {
                                            click: () => {
                                                this.remove(params.row)
                                            }
                                        }
                                    },
                                    [
                                        h('i', {
                                            class : 'iconfont icon-qingkong'
                                        }),
                                        h("span",'删除')
                                    ])
                            ]);
                        }
                    }
                ],
                privilegeModal:false,//新增窗口弹窗
                addPrivilege:false,//新增
                editPrivilege:false,//编辑
                privilegeValidate:{//新增数据
                    type:'1',
                    parentId:0,
                    name:'',
                    code:'',
                    levelMenu:'',
                    secondLevelMenu:'',
                },
                rulePrivilege:{
                    name: [
                        {required: true, message: '请输入权限名称', trigger: 'blur'},
                        { type: 'string', max: 200, message: '权限名称长度不能大于200位', trigger: 'blur' }
                    ],
                    code: [
                        {required: true, message: '请输入权限code', trigger: 'blur'},
                        {required: true, validator: validatecode, trigger: 'blur'},
                        { type: 'string', max: 200, message: '权限code长度不能大于200位', trigger: 'blur' }
                    ]
                },
                parentIdList:[],
                secondLevelMenuList:[],
            }
        },
        //所需子组件
        components: {
            Loading
        },
        created:function(){
            var width = window.innerWidth;
            if(width >1600){
                this.height=window.innerHeight-200;
            }else if(width > 1440 && width <=1600){
                this.height=window.innerHeight-180;
            }else if(width > 1366 && width <=1440){
                this.height=window.innerHeight-172;
            }else if(width > 1280 && width <=1366){
                this.height=window.innerHeight-166;
            }else if(width > 1024 && width <=1280){
                this.height=window.innerHeight-162;
            }else{
                this.height=window.innerHeight-151;
            }
            if(window.innerWidth > 1600){
                this.pageSize=20;
            };
            this.privilegeData = this.privilegeTableData(this.privilegeForm,this.currentPage,this.pageSize);
            axios.get('/menus/'+this.privilegeValidate.parentId+'/children').then(res => {
                this.parentIdList = res.data;
                this.privilegeValidate.levelMenu=res.data[0].id;
            }).catch(err =>{
            });
        },
        mounted() {
        },
        methods: {
            //查询物流数据，条件，当前页，每页显示多少条
            privilegeTableData (formData,currentPage,pageSize) {
                this.spinShow = true;
                this.tableShow = false;
                var type = formData.type;//菜单名称
                var name = formData.name;//权限名称
                var levelMenu = formData.levelMenu;
                var parentId = formData.parentId;
                let data = {
                    params: {
                        pageIndex : currentPage,
                        pageSize : pageSize,
                        type : type,
                        name : name,
                        levelMenu : levelMenu,
                        parentId : parentId,
                    }
                };
                axios.get('/permissions',data).then(res => {
                    this.total=res.data.total;
                    this.pageTotal=Math.ceil(res.data.total / pageSize);
                    this.privilegeData = res.data.data;
                    this.spinShow=false;
                    this.tableShow = true;
                }).catch(err =>{
                })
            },
            //条件查询
            privilegeSearch () {
                this.currentPage = 1;
                this.privilegeData = this.privilegeTableData(this.privilegeForm,this.currentPage,this.pageSize);
            },
            //改变页数
            changePage: function (page) {
                this.currentPage=page;
                this.privilegeData = this.privilegeTableData(this.privilegeForm,this.currentPage,this.pageSize);
            },
            //改变每页显示多少条
            changeSize: function (pageSize) {
                this.currentPage=1;
                this.pageSize = pageSize;
                this.pageTotal=Math.ceil(this.total / this.pageSize);
                this.privilegeData = this.privilegeTableData(this.privilegeForm,this.currentPage,this.pageSize);
            },
            //根据ID删除权限管理列表
            remove(column){
                this.delModal=true;
                this.delId = column.id;
            },
            delOK(){
                this.delLoading = true;
                axios.delete('/permission/'+this.delId).then(res => {
                    this.$Message.success('删除成功');
                    this.delLoading = false;
                    this.delModal=false;
                    this.privilegeData = this.privilegeTableData(this.privilegeForm,this.currentPage,this.pageSize);
                }).catch(err =>{
                    this.$Message.error({content: err,duration: 0,closable:true});
                    this.delLoading = false;
                });
            },
            delCancel() {
                this.delModal=false;
                this.delId = '';
            },
            //新增
            addPrivilegeMain (column) {
                this.privilegeValidate={//新增数据
                    type:'1',
                    parentId:0,
                    name:'',
                    code:'',
                    levelMenu:'',
                    secondLevelMenu:'',
                },
                axios.get('/menus/'+this.privilegeValidate.parentId+'/children').then(res => {
                    this.parentIdList = res.data;
                    this.privilegeValidate.levelMenu=res.data[0].id;
                }).catch(err =>{
                });
                this.addPrivilege = true;
                this.editPrivilege = false;
                this.privilegeModal=true;
            },
            //保存新增
            savePrivilege(name){
                this.modal_loading = true;
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        if(this.privilegeValidate.parentId==""){
                            this.privilegeValidate.parentId = this.privilegeValidate.levelMenu;
                        }
                        axios.post('/permissions', this.privilegeValidate).then(res => {
                            this.modal_loading = false;
                            this.privilegeModal = false;
                            this.addPrivilege = false;
                            this.$refs[name].resetFields();
                            this.$Message.success('添加成功');
                            this.privilegeData = this.privilegeTableData(this.privilegeForm,this.currentPage,this.pageSize);
                        }).catch(err =>{
                            this.$Message.error({content: err,duration: 0,closable:true});
                            this.modal_loading = false;
                        });
                    } else {
                        this.modal_loading = false;
                    }
                })
            },
            //根据ID编辑
            editPrivilegeMain(column) {
                this.addPrivilege = false;
                this.editPrivilege = true;
                axios.get('/permissions/'+column).then(res => {
                    this.privilegeValidate = res.data;
                    this.privilegeModal=true;
                }).catch(err =>{
                })
            },
            //保存编辑
            editSavePrivilege (name) {
                this.modal_loading = true;
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        axios.put('/permissions',this.privilegeValidate).then(res => {
                            this.modal_loading = false;
                            this.privilegeModal = false;
                            this.editPrivilege=false;
                            this.$refs[name].resetFields();
                            this.privilegeData = this.privilegeTableData(this.privilegeForm,this.currentPage,this.pageSize);
                        }).catch(err =>{
                            this.$Message.error({content: err,duration: 0,closable:true});
                            this.modal_loading = false;
                        });
                    } else {
                        this.modal_loading = false;
                    }
                });
            },
            //关闭新增
            cancelPrivilege(name){
                this.modal_loading = false;
                this.privilegeModal = false;
                this.addPrivilege = false;
                this.editPrivilege = false;
                this.$refs[name].resetFields();
                this.secondShow=true;
            },
            selectLevelMenu(value){
                axios.get('/menus/'+value+'/children',{params:{parentId:value}}).then(res => {
                    this.secondLevelMenuList = res.data;
                    this.privilegeValidate.parentId=res.data[0].id;
                    this.secondShow=true;
                }).catch(err =>{
                    this.secondLevelMenuList = [];
                    this.privilegeValidate.parentId='';
                    this.secondShow=false;
                });
            },
            selectLevelMenus(value){
                axios.get('/menus/'+value+'/children',{params:{parentId:value}}).then(res => {
                    this.secondLevelMenuList = res.data;
                    this.privilegeForm.parentId=res.data[0].id;
                    this.secondShow=true;
                }).catch(err =>{
                    this.secondLevelMenuList = [];
                    this.privilegeForm.parentId='';
                    this.secondShow=false;
                });
            }
        }
    }
</script>